<template>
  <div class="unpaid_order">
    <div class="unpaid_order_header">
      <div class="unpaid_order_id fll">订单号: {{goods.order_sn}}</div>
      <div class="order_status flr">{{status.title}}</div>
    </div>
    <div class="unpaid_order_content">
      <div class="unpaid_productList_box">
        <div class="unpaid_productList fll" v-for="(goodsitem, index) in showImgs" :key="index">
          <img width="100%" :src="goodsitem.original_img" alt />
        </div>
        <div class="product_num flr">共{{goods.goods.length}}种</div>
      </div>

      <div class="unpaid_cost" v-if="showFeeDetail">
        <div class="unpaid_total">
          <span>商品总额</span>
          <span class="flr">¥{{goods.total_amount}}</span>
        </div>
        <div class="unpaid_discount">
          <span>优惠金额</span>
          <span class="flr">¥{{goods.order_prom_amount}}</span>
        </div>
        <div class="unpaid_freight">
          <span>运费</span>
          <span class="flr">¥{{goods.shipping_price}}</span>
        </div>
      </div>
      <div class="real_total" v-if="showFee">
        实付款：
        <span style="color:#E13A3B">¥{{goods.order_amount}}</span>
      </div>
    </div>
    <!-- 待收货 -->
    <div class="unpaid_order_bottom toBedistributed" v-if="status.status == 1">
      <div class="fll deliver_text">请耐心等待商家发货</div>
      <div class="flr real_total">
        实付款：
        <span style="color:#E13A3B">¥{{goods.order_amount}}</span>
      </div>
    </div>
    <!-- 待付款 -->
    <div class="unpaid_order_bottom" v-else-if="status.status == 6">
        <div class="unpaid_operation_left fll">
        <div class="countdown_box">
            <span class="countdown_text">倒计时：</span>
            <span class="countdown_value">
                <van-count-down :time="countDownTime" />
            </span>
        </div>
        <div class="order_tips">本次订单将为你保留30分钟</div>
        </div>
        <div class="unpaid_operation_right flr" @click="payOrder">立即付款</div>
    </div>
    <!-- 待收货 -->
    <div class="unpaid_order_bottom receiving_goods" v-else-if="status.status == 7">
        <div class="confirm_btn" @click="confirm">确认收货</div>
    </div>
    <!--待评价-->
    <div class="unpaid_order_bottom receiving_goods"  v-else-if="status.status == 9">
        <div class="confirm_btn">再来一单</div>
        <div class="evaluate_btn">评价</div>
    </div>
  </div>
</template>

<script>
  import { CountDown } from 'vant';
  Vue.use(CountDown);
  import {parseGoodsStatus} from '@/utils/order'
  export default {
    props:{
        goods: {
            type: Object,
            default: ()=>{return {}}
        },
        refresh: {
            type: Function,
            default: () => {

            }
        }
    },
    methods:{
        payOrder(){
            // this.$store.dispatch('payCode', {
            //     order_id: this.goods.order_id
            // }).then(res => {
            //     this.$util.wxPay({
            //         data: res.data.result,
            //         success:(res) => {
            //             this.refresh()
            //         }
            //     })
            // }).catch(e => {

            // })
            this.$router.push({
              name: 'paying',
              query: {
                order_id: this.goods.order_id
              }
            })
        },
        confirm(){
            this.$store.dispatch('confirmOrder', {
                order_id: this.goods.order_id
            }).then(res => {
                this.refresh()
            }).catch(e => {
                
            })
        },
        cancel(){
            this.$store.dispatch('cancelOrder', {
                order_id: this.goods.order_id
            }).then(res => {
                this.refresh()
            }).catch(e => {
                
            })
        }
    },
    computed:{
        status(){
            return parseGoodsStatus(this.goods)
        },
        showFeeDetail(){
            if([1,3,6].indexOf(this.status.status)>-1){
                return true
            }
            return false
        },
        showFee(){
            if([1,3,6,7].indexOf(this.status.status)>-1){
                return false
            }
            return true
        },
        showImgs(){
            var ar = []
            for (let index = 0; index < this.goods.goods.length; index++) {
                if(index < 4) {
                    const element = this.goods.goods[index];
                    ar.push(element)
                }
            }
            return ar
        },
        countDownTime(){
            if(this.status.status == 6){
                var leftTime = this.goods.add_time + 1800 - this.$util.timeformat(0, 'timestamp')
                if(leftTime>0){
                    return leftTime * 1000
                }
                this.cancel()
            }           
            return 0
        }
    }
  }

</script>

<style lang="less" rel="stylesheet/less" scoped>
.fll {
  float: left;
}
.flr {
  float: right;
}
.refresh {
  height: 100vh;
}
.van-tabs--line .van-tabs__wrap {
    border-bottom: 1px solid #eaeaea;
  }
  .unpaid_order {
    min-height: 280px;
    background-color: #fff;
    margin-top: 11px;
    padding-left: 14px;

    .unpaid_order_header {
      line-height: 43px;
      font-size: 11px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #303030;
      border-bottom: 1px solid #d8d8d8;
      overflow: hidden;

      .order_status {
        text-align: center;
        margin-top: 17px;
        margin-right: 20px;
        font-size: 9px;
        width: 46px;
        line-height: 14px;
        background: linear-gradient(137deg,
            rgba(254, 102, 118, 1) 0%,
            rgba(244, 138, 152, 1) 100%);
        border-radius: 0px 7px 0px 7px;
        color: #fff;
      }
    }

    .unpaid_order_content {
      padding-top: 14px;
      padding-bottom: 14px;
      height: 173px;
      border-bottom: 1px solid #d8d8d8;
      box-sizing: border-box;

      .unpaid_productList_box {
        overflow: hidden;
        margin-bottom: 14px;

        .unpaid_productList {
          margin-right: 9px;
          border: 1px solid rgba(220, 221, 220, 1);
          width: 62px;
          height: 62px;
          img{
              object-fit: cover;
              width: 100%;
              height: 100%;
          }
        }

        .product_num {
          margin-right: 31px;
          line-height: 63px;
          font-size: 11px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(48, 48, 48, 1);
        }
      }

      .unpaid_cost {
        padding-right: 16px;
        font-size: 11px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 48, 48, 1);

        .unpaid_total,
        .unpaid_discount {
          margin-bottom: 11px;
        }
      }

      &.already {
        height: 133px;

        .real_total {
          float: right;
          margin-top: 6px;
          margin-right: 24px;
          font-size: 15px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(48, 48, 48, 1);
        }
      }
    }

    .unpaid_order_bottom {
      padding-top: 11px;
      overflow: hidden;

      .unpaid_operation_left {
        font-size: 14px;

        .countdown_box {
          .countdown_text {
            font-size: 11px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(48, 48, 48, 1);
          }

          .countdown_value {
            font-size: 14px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            color: rgba(222, 41, 41, 1);
          }
        }

        .order_tips {
          margin-top: 6px;
          font-size: 11px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
      }

      .unpaid_operation_right {
        margin-right: 19px;
        width: 94px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        background: linear-gradient(90deg,
            rgba(1, 47, 64, 1) 0%,
            rgba(1, 47, 64, 1) 100%);
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }
    }

    & .toBedistributed {
      padding: 0;
      line-height: 62px;

      .deliver_text {
        font-size: 11px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 48, 48, 1);
      }

      .real_total {
        margin-right: 16px;
        font-size: 15px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 48, 48, 1);
      }
    }

    & .receiving_goods {
      .evaluate_btn {
        margin-top: 5px;
        margin-right: 7px;
        float: right;
        width: 63px;
        height: 32px;
        line-height: 34px;
        text-align: center;
        border: 1px solid rgba(1, 47, 64, 1);
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(1, 47, 64, 1);
      }

      .confirm_btn {
        float: right;
        margin-right: 21px;
        margin-top: 5px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        width: 94px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        background: linear-gradient(90deg,
            rgba(1, 47, 64, 1) 0%,
            rgba(1, 47, 64, 1) 100%);
      }
    }
}

</style>
